<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础的get请求</title>
</head>
<body>
    <h1>基础的get请求</h1>
    <form id="form" action="" method="">
        <input id="ipt" type="text">
        <button id="btn">输入学生id 查询他的详细信息</button>
    </form>

<script>
//    oBtn代表的是docunment的节点
   const oBtn =document.getElementById('btn')
   const oIpt =document.getElementById('ipt')
   const oForm =document.getElementById('form')

//    表单提交事件绑定方式:
    // 1.给按钮绑定点击事件
    // 2.给form元素绑定提交事件submit
    // 3.一般我们不用form的提交,所以需要在事件内阻止默认事件(1.e.preventDefault()  2.return false)




    /* oBtn.onclick = function (e) {
      e.preventDefault();
      console.log(1);
    } */

    /* oForm.onsubmit = function (e) {
    //  e.preventDefault阻止默认事件
        // e.preventDefault()
      console.log(2);

      return false;
    } */
   oForm.onsubmit =function(){
// 1.实例化XMLHttpRequest
    const xhr=new XMLHttpRequest();

    //2 打开路径
    // 参数1：请求方式 参数2：请求地址 参数3：是否是异步
    xhr.open('get','/user',true)
    
    // 3.发送请求
    xhr.send();
    // 4.监听事件
    xhr.onreadystatechange=function(){
        /*
        0:初始化xhr 1：已经调用的open方法 2：已经调用了send正在发送 3：已经获取部分数据 4：已经获取所有数据
        */ 
        if(xhr.readyState===4 &&(xhr.status>= 200 && xhr.status <= 299)){
            console.log(xhr.responseText);
}
    }
    

    return false;

} 



</script>

</body>
</html>